/*
 * FileName: 个人技能
 * Created Date: 2022-10-16 17:03:31
 * Author: 文初阳
 * -----
 * Last Modified: 2022-10-16 17:03:31
 * Modified By: 文初阳
 */

import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Form, Input } from 'antd';
import React from 'react';
import styles from './PersonalSkills.module.scss';

const { TextArea } = Input;

const PersonalSkills: React.FC = () => {
    return (
        <div className={styles.wrapper}>
            <h1>个人技能点</h1>
            <Form.List name="personalSkills">
                {(fields, { add, remove }, { errors }) => (
                    <div className={styles.itemWrapper}>
                        {fields.map(({ key, name, ...restField }) => (
                            <div className={styles.item} key={key}>
                                <div className={styles.label}>
                                    <Form.Item {...restField} noStyle name={[name, 'title']}>
                                        <Input placeholder="技能点，如：React" />
                                    </Form.Item>
                                    <MinusCircleOutlined
                                        className={`dynamic-delete-button ${styles.iconDelete}`}
                                        onClick={() => remove(name)}
                                    />
                                </div>
                                <div className={styles.value}>
                                    <Form.Item {...restField} noStyle name={[name, 'content']}>
                                        <TextArea
                                            rows={3}
                                            placeholder="对技能点的熟悉程度，可使用‘<cb> 蓝色强调 </cb>’ 和 ‘<cr> 红色强调 </cr>’ 来做强调"
                                        />
                                    </Form.Item>
                                </div>
                            </div>
                        ))}
                        <Form.Item noStyle>
                            <Button
                                type="dashed"
                                onClick={() => add()}
                                style={{
                                    width: '48%',
                                }}
                                icon={<PlusOutlined />}
                            >
                                新增一条个人技能点
                            </Button>
                            <Form.ErrorList errors={errors} />
                        </Form.Item>
                    </div>
                )}
            </Form.List>
        </div>
    );
};
export default PersonalSkills;
